<template>
  <div class="order-container">
    <div class="header">
      <h1>我的订单</h1>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="预约中" name="first" @click="changeTab('pending')">
          <div class="pending" v-for="o in orders" v-if="o.status==0">
            <el-image class="order-image" :src="o.image" alt="订单图片" />
            <div class="order-details">
              <p class="order-number">订单号: {{ o.orderNumber }}</p>
              <p class="order-duration">时长: {{ o.playDuration }}</p>
              <p class="order-price">总金额: {{ o.cost }}元</p>
              <button @click="viewOrder(o.id)">查看订单</button>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="陪玩中" name="second" @click="changeTab('playing')">
          <div class="pending" v-for="o in orders" v-if="o.status==1">
            <el-image class="order-image" :src="o.image" alt="订单图片" />
            <div class="order-details">
              <p class="order-number">订单号: {{ o.orderNumber }}</p>
              <p class="order-duration">时长: {{ o.playDuration }}</p>
              <p class="order-price">总金额: {{ o.cost }}元</p>
              <button @click="viewOrder(o.id)">查看订单</button>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="third" @click="changeTab('completed')">
          <div class="pending" v-for="o in orders" v-if="o.status==2">
            <el-image class="order-image" :src="o.image" alt="订单图片" />
            <div class="order-details">
              <p class="order-number">订单号: {{ o.orderNumber }}</p>
              <p class="order-duration">时长: {{ o.playDuration }}</p>
              <p class="order-price">总金额: {{ o.cost }}元</p>
              <button @click="viewOrder(o.id)">查看订单</button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

<!--    <div class="order-list">-->
<!--      <div class="order-item" v-for="o in orders">-->
<!--        <el-image class="order-image" :src="o.img" alt="订单图片" />-->
<!--        <div class="order-details">-->
<!--          <p class="order-number">订单号: {{ o.orderNumber }}</p>-->
<!--          <p class="order-duration">时长: {{ o.playDuration }}</p>-->
<!--          <p class="order-price">总金额: {{ o.cost }}元</p>-->
<!--          <button @click="viewOrder(o.id)">查看订单</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      activeTab: 'pending',
      orders: [],
    };
  },
  mounted() {
    this.setOrders();
  },
  methods: {
    setOrders() {
      axios.post('http://localhost:8083/orders/list').then(response => {
        this.orders = response.data.data;
      });
    },
    viewOrder(id) {
      // alert(id)
      localStorage.setItem('orderId', id);
      // 跳转到订单详情页面，使用路由
      this.$router.push('/details');
    },
  },
};
</script>

<style scoped>
.order-container {
  padding: 20px;
  background-color: #f7f9fc;
  height: 100vh;
}

.header {
  text-align: center;
}

.tabs {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.tab {
  margin: 0 20px;
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
}

.tab.active {
  color: #0056b3;
  border-bottom: 2px solid #007bff;
}

.order-list {
  margin-top: 20px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
}

.order-image {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}

.order-details {
  flex-grow: 1;
}

.order-number {
  font-weight: bold;
}

.order-duration,
.order-price {
  margin: 5px 0;
}

button {
  background-color: #00aaff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
